iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
0
自我挑戰組

人生第一次的SideProject系列 第 15

[Day 15 ] 技能搜尋實作(一)

  • 分享至 

  • xImage
  •  

今天的進度完全卡關了...決定來把邏輯整理一下。

目前打算實作的功能,是在技能欄增加搜尋框,顯示輸入的技能,實際執行時就是要對 ngFor 內容進行filter,篩選其顯示內容。

以下找到幾種可能方法:

= = = 方法一 = = =

<input [(ngModel)]="query">
<div *ngFor="let item of items | search:'id,text':query">{{item.text}}</div>
import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || []).filter(item => keys.split(',').some(key => item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])));

  }
}

= = = 方法二 = = =

@Component({
  selector: 'shell',
  template: `
    <h3>Shell</h3><button (click)="toggle()">Toggle!</button>

<ng-container *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-container>
  `
})

export class ShellComponent implements OnInit {

  public stuff:any[] = [];
  public show:boolean = false;

  constructor() {}

  ngOnInit() {
    this.stuff = [
      { name: 'abc', id: 1 },
      { name: 'huo', id: 2 },
      { name: 'bar', id: 3 },
      { name: 'foo', id: 4 },
      { name: 'thing', id: 5 },
      { name: 'other', id: 6 },
    ]
  }

  toggle() {
    this.show = !this.show;
  }

  log(thing) {
    console.log(thing);
  }

}

= = = 方法三 = = =

  <ng-container *ngFor="let item of list; let odd = odd">
    <li *ngIf="odd">{{ item }}</li>
  </ng-container>

要達成想要的功能,搜尋網路文件大概總結出以上三種方法。但不曉得是哪個步驟錯誤,怎麼套用都無法成功,今天記錄一下實作過程,明天再繼續嘗試達成的方法。

= = = = =

你今天的努力,
是否有跟未來的夢想
同一個等級?


上一篇
[Day 14 ] 擲骰功能實作(三)
下一篇
[Day 16 ] 技能搜尋實作(二)
系列文
人生第一次的SideProject33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言